<template>
  <div class="trend-page" v-loading="loading">
    <div class="page-title">5G终端出账情况</div>
    <div class="page-top">
      <div class="text-content">
        <!-- <div>月 **</div>
        <div>同比 ** 环比 **</div>
        <div>季度 **</div>
        <div>同比 ** 环比 **</div>
        <div>年 **</div>
        <div>同比 ** 环比 **</div> -->
        <div>{{ month }}</div>
        <div>{{ quarter }}</div>
        <div>{{ year }}</div>
      </div>
      <div class="chart-content">
        <div class="chart-title">5G终端出账净增趋势</div>
        <LineChart :chartData="chartData" class="line-chart"></LineChart>
      </div>
    </div>
    <div class="page-bottom tableBox">
      <el-table :data="tableData" style="width: 100%" border class="tableTh28">
        <el-table-column label="单位:万户" prop="displayName" align="center"></el-table-column>
        <el-table-column label="月净增" prop="thisMonthValue" align="center"></el-table-column>
        <el-table-column label="环比" prop="hbIncrease" align="center"></el-table-column>
        <el-table-column label="同比" prop="tbIncrease" align="center"></el-table-column>
        <el-table-column label="年净增" prop="thisYearLjValue" align="center"></el-table-column>
        <el-table-column label="时序完成" prop="completeYearBudget" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
import { handle_obj } from "./utils/index.js";
export default {
  components: {
    LineChart: () => import("./charts/ydxzChart.vue")
  },
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },
  data(){
    return {
      loading: false,
      chartData: [[], []],
      tableData: [],
      month: "",
      quarter: "",
      year: "",
    }
  },
  created(){
    
  },
  methods: {
    getData(){
      this.loading = true;
      $budgetAPI.getCountyOperationFiveGNetIncrease(
        { token: this.form.token, areaId: this.form.areaId, acctMonth: this.form.month },
        res => {
          if(res.code == 0){
            const { lastBrokenLine, thisBrokenLine, tableData, month, quarter, year } = res.content;
            this.chartData = [handle_obj(lastBrokenLine[0]), handle_obj(thisBrokenLine[0])];
            this.tableData = tableData;
            this.month = month;
            this.quarter = quarter;
            this.year = year;
          }
          this.loading = false;
        },
        err => {
          this.loading = false;
        }
      )
    }
  },
}
</script>
<style lang="scss" scoped>
.trend-page {
  padding: 20px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  .page-title {
    text-align: center;
    font-size: 24px;
    font-weight: 900;
  }
  .page-top {
    display: flex;
    align-items: center;
    margin-top: 20px;
    .text-content {
      width: 200px;
      font-size: 18px;
      line-height: 30px;
      margin-top: 50px;
      > div {
        margin-bottom: 10px;
      }
    }
    .chart-content {
      flex: 1;
      .chart-title {
        text-align: center;
        font-size: 20px;
      }
      .line-chart {
        margin-top: 10px;
        width: 100%;
        height: 290px;
      }
    }
  }
}
/deep/ .el-table {
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 26px;
    font-size: 12px;
  }
  .el-table__row {
    td {
      padding: 0 !important;
    }
    .cell {
      padding: 2px 0 !important;
      font-size: 12px !important;
    }
  }
}
</style>